<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="activity-box" @click="toActivityDetails">
		<view class="team-head flex-row-center">
			<view class="team-user flex-row-center">
				<image src="../../static/logo.png" class="ava" mode="aspectFill"></image>
				<text class="user-name">{{matchInfo.name}}</text>
			</view>
			<!--  -->
			<view class="description-right flex-row-center">
				<image src="../../static/activity/navigation_icon.png" class="icon" mode=""></image>
				<text class="address">成华区</text>
				<text class="interval"></text>
				<text class="distanc">{{matchInfo.juli}}km</text>
			</view>
		</view>
		<!-- 图片 -->
		<view class="content-img">
			<image v-for="(item,index) in matchInfo.imageList" :key="index" class="img-item" :src="item" mode="aspectFill">
			</image>
		</view>
		<!-- 描述 -->
		<view class="description-box flex-row-center">
			<view class="countdown-box flex-row-center">
				<up-icon name="clock" color="#93AAA1" size="26rpx"></up-icon>
				<view class="time-box flex-row-center">
					<template v-if="true">
						<text class="text">倒计时</text>
						<text class="time">23</text>
						<text class="text">时</text>
						<text class="time">23</text>
						<text class="text">分</text>
						<text class="time">59</text>
						<text class="text">秒</text>
					</template>
					<text v-else class="text">组队中</text>
				</view>
			</view>
			<view class="description-right flex-row-center">
				<template>
					<up-icon name="thumb-up-fill" color="#89DEB9" size="30rpx"></up-icon>
					<up-icon name="thumb-up" color="#93AAA1" size="30rpx"></up-icon>
				</template>
				<up-icon name="chat" color="#93AAA1" size="30rpx"></up-icon>
			</view>
		</view>
		<!-- 底部信息 -->
		<view class="activity-footer flex-row-center">
			<template>
				<text class="state end" v-if="true">报名结束</text>
				<text class="state ing" v-else>正在报名</text>
			</template>
			<text class="interval"></text>
			<view class="register-box flex-row-center">
				<up-avatar-group :urls="urls" size="44rpx" gap="0.4"></up-avatar-group>
				<text class="user-num">9+</text>
				<text class="text">人已报名</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		matchInfo: {
			default: {}
		}
	});
	const matchInfo = computed(() => props.matchInfo);
	const imageList = [
		'https://img2.baidu.com/it/u=494215659,3993917048&fm=253&fmt=auto&app=120&f=JPEG?w=713&h=475',
		'https://img1.baidu.com/it/u=3041373478,2488510222&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=500',
		'https://img0.baidu.com/it/u=993886911,4026990364&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
	]
	import {
		reactive
	} from 'vue'
	const urls = reactive([
		'https://uview-plus.jiangruyi.com/uview-plus/album/1.jpg',
		'https://uview-plus.jiangruyi.com/uview-plus/album/2.jpg',
		'https://uview-plus.jiangruyi.com/uview-plus/album/3.jpg',
	]);
	const toActivityDetails = (id) => {
		uni.navigateTo({
			url: '/page_activity/views/activityDetails?id='+matchInfo.value.m_id
		})
	}
</script>

<style lang="scss" scoped>
	.activity-box {
		width: 100%;
		// min-height: 458rpx;
		// background: rgba(255, 255, 255, .2);
		background-color: $activityItem-bg-color;
		border-radius: 20rpx;
		margin-bottom: 16rpx;
		padding: 32rpx 20rpx;
		box-sizing: border-box;

		.team-head {
			justify-content: space-between;

			.team-user {
				.ava {
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
				}

				.user-name {
					font-weight: bold;
					font-size: 34rpx;
					color: $name-color;
					margin: 0 4rpx 0 16rpx;
				}

				.lv-box {
					width: 68rpx;
					height: 38rpx;
					position: relative;
					margin-right: 24rpx;
					justify-content: flex-end;

					.lv-bg {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}

					.lv {
						font-weight: bold;
						font-size: 20rpx;
						color: #FFE4A3;
						z-index: 9;
						transform: translateX(-12rpx);
					}
				}

				.follow {
					width: 96rpx;
					height: 48rpx;
					border: 2rpx solid $attention-color;
					border-radius: 12rpx;

					.text {
						font-weight: bold;
						font-size: 28rpx;
						color: $attention-color;
					}
				}

				.followed {
					width: 124rpx;
					height: 48rpx;
					border-radius: 12rpx;
					border: 2rpx solid $unAttention-color;

					.text {
						font-weight: bold;
						font-size: 28rpx;
						color: $attention-color;
					}
				}
			}

			.description-right {
				.icon {
					width: 20rpx;
					height: 22rpx;
					margin-right: 4rpx;
				}

				.address {
					font-weight: 400;
					font-size: 24rpx;
					color: #94B2A7;
				}

				.interval {
					display: block;
					width: 2rpx;
					height: 20rpx;
					background-color: #ccc;
					margin: 0 16rpx;
				}

				.distanc {
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.6);
					// color: $distance-color;
				}
			}
		}

		.content-img {
			display: grid;
			grid-template-columns: auto auto auto;
			grid-template-rows: auto auto auto;
			margin-top: 24rpx;

			.img-item {
				width: 218rpx;
				height: 196rpx;
				background: #D9D9D9;
				border-radius: 16rpx;
			}
		}
	}

	.description-box {
		width: 100%;
		margin: 20rpx 0 8rpx 0;
		justify-content: space-between;

		.countdown-box {
			.time-box {
				margin-left: 6rpx;
			}

			.text {
				font-weight: 500;
				font-size: 28rpx;
				color: $description-color;
			}

			.time {
				font-weight: 500;
				font-size: 32rpx;
				color: $timer-color;
				margin: 0 6rpx;
			}
		}
	}

	.activity-footer {
		.state {
			font-weight: 500;
			font-size: 24rpx;
			color: #989899;
		}

		.ing {
			color: #A2DEA3;
		}

		.interval {
			display: block;
			width: 2rpx;
			height: 20rpx;
			background-color: #ccc;
			margin: 0 8rpx;
		}

		.register-box {
			font-weight: bold;
			font-size: 24rpx;
			color: $description-color;

			.user-num {
				color: $num-text-color;
				margin: 0 4rpx 0 6rpx;
			}
		}
	}
</style>